<template>
  <div class="tableListWrapper">

    <h1 class="title">{{ title }}年财务利润分析报表</h1>
    <div class="form">
      <el-date-picker
        :clearable="false"
        v-model="year"
        type="year"
        placeholder="选择年"
        size="mini"
        style="width: 160px; margin-right: 20px"
        :picker-options="pickerOptions"
      ></el-date-picker>

      <el-button type="primary" size="mini" @click="search">查询</el-button>
    </div>
    <div class="financeChart" id="line"></div>
    <div class="chartTable">
      <el-table :data="tableData" style="width: 100%" border show-summary>
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          v-for="item in profitTableHeard"
          :key="item.prop"
          align="center"
          sortable
        >
        </el-table-column>

        <!-- <el-table-column
          v-for="(item, index) in tableData[0].month"
          :key="index"
          :label="item"
        >
          <template slot-scope="{ row }">{{ row }}</template>
          <template slot-scope="{ row }">{{item.to}}</template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import { financialStatement } from "@/api/financial-management/index.js";
import { profitTableHeard } from "./constant/index.js";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      year: new Date(),
      title: new Date().getFullYear(),
      tableData: [],
      profitTableHeard,
      expenditures: [],
      revenue: [],
      totalProfit: [],
    };
  },
  mounted() {
    this.createChart();
    this.initTbaleData()
  },
  created() {
    
    this.getData();
  },
  methods: {
    createChart(expenditures, revenue, totalProfit) {
      let chart = this.$echarts.getInstanceByDom(
        document.getElementById("line")
      ); //有的话就获取已有echarts实例的DOM节点。
      if (chart == null) {
        // 如果不存在，就进行初始化。
        chart = this.$echarts.init(document.getElementById("line"));
      }
      //let chart = this.$echarts.init(document.getElementById("line"));
      let option = {
        tooltip: {},
        legend: {
          data: ["支出", "收入", "利润"],
        },
        xAxis: {
          type: "category",
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "支出",
            data: expenditures,
            type: "line",
            smooth: true,
          },
          {
            name: "收入",
            data: revenue,
            type: "line",
            smooth: true,
          },
          {
            name: "利润",
            data: totalProfit,
            type: "line",
            smooth: true,
          },
        ],
      };
      chart.setOption(option);
    },
    initTbaleData() {
      for (let i = 0; i < 12; i++) {
      this.tableData.push({
        expenditures: 0,
        fsDate: i + 1,
        profitMargin: "0%",
        revenue: 0,
        totalPrice: 0,
        totalProfit: 0,
      });
    }
    },
    async getData() {
      let res = await financialStatement(this.year.getFullYear());
      if (res.code == 200) {
        if (res.data.length !== 0) {
          res.data.forEach((item,index) => {
            let month = item.fsDate.split("-")[1];
            if (month[0] == 0) {
              this.tableData.splice(month[1] - 1, 1, item);
              this.tableData[month[1]-1].fsDate = month[1]
            } else {
              this.tableData.splice(month - 1, 1, item);
              this.tableData[month-1].fsDate = month
            }
          });
        } else {
          this.tableData = []
          this.initTbaleData()
        }
      }
    },
    search() {
      this.getData();
      this.title = this.year.getFullYear();
    },
  },
  watch: {
    tableData(newValue) {
      this.expenditures = [];
      this.revenue = [];
      this.totalProfit = [];
      newValue.forEach((item) => {
        this.expenditures.push(item.expenditures);
        this.revenue.push(item.revenue);
        this.totalProfit.push(item.totalProfit);
      });
      this.createChart(this.expenditures, this.revenue, this.totalProfit);
    },
  }
};
</script>

<style lang="scss" scope>
.tableListWrapper {
  width: 100%;
  margin: 0 auto;
}
.title {
  font-size: 26px;
  text-align: center;
  width: 100%;
}
.form {
  right: 2%;
  top: 65px;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}
.financeChart {
  width: 1320px;
  height: 420px;
  margin: 0 auto;
  box-shadow: 0px 0px 8px 0px rgba(40,49,66,.1);
  border-radius: 10px;
}
.chartTable {
  width: 1320px;
  margin: 42px auto 0;
}
</style>
